export interface Refs {
    bpmnViewer: YvanUI.CtlBpmn
}

export default abstract class View<M,INP> extends YvanUI.BaseModule<M, Refs, INP> {

    tempItem: any;

    timelineClick(id: any) {
        // console.log(id)
        const iid = 'Activity_' + id;
        const item =  $("g[data-element-id=" + iid + "]");
        const itemChilds = item.find('.djs-hit');
        $(itemChilds[0]).css(
            "fill", "red"
        )
    }

    timelineMouseMove(param: any) {
        // console.log("timelineMouseMove", param)

        const iid = 'Activity_' + param;
        const item =  $("g[data-element-id=" + iid + "]");
        const itemChilds = item.find('.djs-hit');

        if (this.tempItem && this.tempItem !== itemChilds[0]) {
            $(this.tempItem).css(
                "fill", "none"
            )
        }
        this.tempItem = itemChilds[0];
        $(itemChilds[0]).css(
            "fill", "red"
        )
    }

    timelineMouseMoving(param: any) {
        // console.log("timelineMouseMoving", param)
    }

    timelineMouseOut(param: any) {
        // console.log("timelineMouseOut", param)
        $(this.tempItem).css(
            "fill", "none"
        )
    }

    onDataUpdate(param: any) {
        console.log("onDataUpdate", param)
    }

    onItemRender(param: any) {
        console.log("onItemRender", param)
        //$('div[webix_tl_id='+param.id+']').css({'position':'relative'});
        //$('.webix_timeline_left').css({'position':'relative'});
    }
    onAfterRender(param:any){
        $('.webix_timeline_left').css({'position':'relative','height':'90px'});
    }
    viewResolver(): any {
        return {
            rows: [
                {
                    cols: [
                        {
                            view: "button",
                            text: "addOverlays",
                            icon: "fa fa-bars",
                            onClick: {
                                type: "function",
                                bind: "click1",
                            },
                        },
                        {
                            view: "button",
                            text: "reloadDiagram",
                            icon: "fa fa-bars",
                            onClick: {
                                type: "function",
                                bind: "click2",
                            },
                        },
                        {
                            view: "button",
                            text: "horizontalDialog",
                            icon: "fa fa-bars",
                            onClick: {
                                type: "function",
                                bind: "click3",
                            },
                        },
                        {
                            view: "button",
                            text: "verticalDialog",
                            icon: "fa fa-bars",
                            onClick: {
                                type: "function",
                                bind: "click4",
                            },
                        },
                        {}
                    ]
                },
                {}
//                 {
//                     view: 'bpmn',
//                     ctlName: 'bpmnViewer',
//                     onSuccess: {
//                         type: 'function',
//                         bind: 'loadSuccess'
//                     },
//                     onFailed: {
//                         type: 'function',
//                         bind: 'loadFailed'
//                     },
//                     onClick: {
//                         type: 'function',
//                         bind: 'itemClick'
//                     },
//                     onHover: {
//                         type: 'function',
//                         bind: 'itemHover'
//                     },
//                     onOut: {
//                         type: 'function',
//                         bind: 'itemOut'
//                     }
//                 },
//                 {
//                     cols: [
//                         {
//                             view:"timeline",
//                             // width: 500,
//                             // tooltip:"#extra#",
//                             borderless:true,
//                             css: 'mycustomcss',
//                             type:{
//                                 lineColor:function(obj){
//                                     if(obj.value == "Available") return "#55CD97";
//                                     if(obj.value == "Taken") return "#1CA1C1";
//                                     if(obj.value == "Broken") return "#FF5C4C";
//                                     if(obj.value == "Fixed") return "orange";
//                                     if(obj.value == "Deprecated") return "#94A1B3";
//                                 },
//                                 width: 200,
//                                 // templateDate: '<div style="width: 100px;">#date#</div>',
//                                 // templateValue: '#value#',
//                                 template: `<div style="left:10px; width:99px;float:left" class="webix_timeline_date"><div style="width: 100px;">#date#</div></div>
// <svg width="145px" height="84px" style="position: absolute;top:0">
// <line x1="133px" y1="15" x2="133px" y2="73" class="webix_timeline_node" style="stroke-width:2px; stroke:#1CA1C1;"></line>
// <circle cx="133px" cy="9" r="6" class="webix_timeline_node webix_timeline_point" style="stroke-width:2px; stroke:#1CA1C1; fill:transparent;"></circle>
// </svg>
// <div style="height:58px;margin-top: -20px;margin-left:150px">
// <div class="webix_timeline_value">#value#</div>
// <div class="webix_timeline_details">#details#</div>
// </div>
// <div style="clear:both"></div>`
//                             },
//                             on:{
//                                 onItemClick:this.timelineClick,
//                                 onMouseMove: this.timelineMouseMove,
//                                 onMouseMoving: this.timelineMouseMoving,
//                                 onMouseOut: this.timelineMouseOut,
//                                 onDataUpdate: this.onDataUpdate,
//                                 onItemRender: this.onItemRender,
//                                 onAfterRender: this.onAfterRender
//                             },
//                             mouseEventDelay: 1,
//                             onMouseMove:{},
//                             scheme:{
//                                 $init:function(obj){
//                                     obj.$css = obj.value;
//                                     // obj.extra = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est sit amet augue aliquam vestibulum. Donec tempus erat in gravida dapibus."
//                                 }
//                             },
//                             data: [
//                                 { id:1, value:"生产管理室审批", details:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est sit amet augue aliquam vestibulum.", date:"2017-08-01"},
//                                 { id:2, value:"工程管部理审批", details:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est sit amet augue aliquam vestibulum.", date:"2017-09-10" },
//                                 { id:3, value:"生产副总审批", details:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est sit amet augue aliquam vestibulum.", date:"2017-12-11" },
//                                 { id:4, value:"总工程师审批", details:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est sit amet augue aliquam vestibulum.", date:"2018-02-10" },
//                                 { id:5, value:"总经理审批", details:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est sit amet augue aliquam vestibulum.", date:"2018-03-15" },
//                                 { id:6, value:"董事长审批", details:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est sit amet augue aliquam vestibulum.", date:"2018-03-21"},
//                                 { id:7, value:"记录档案", details:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est sit amet augue aliquam vestibulum.",date:"2019-05-16" },
//                             ]
//                         },
//                         // {
//                         //     view: "resizer"
//                         // },
//                         // {}
//                     ]
//                 }

            ],
        };
    }
}
